<template>
	<view-box class="NewListPage" bodyPaddingBottom="50px" bodyPaddingTop="0">

		<x-header title="最新动态" :left-options="{showBack:true,backText:'返回'}" :right-options="{showMore: true}" @on-click-more="menusFlag = true">
		</x-header>
		<div id="swiper_show">
			<swiper :options="swiperOption" class="reSwiper">
				
				<swiper-slide v-for="item in swiperList" class="reSwiperSlide" v-on:click="go('ZymlListDetail',{id:item.id})">
					<div class="imgDiv" v-bind:style="{background:item.imageUrl}">
						<!--<img src="../assets/news/news01.jpg" >-->
						<div class="imageTitle">{{item.title}}</div>
					</div>
				</swiper-slide>
				

				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>

		<div id = "reList" class="newsList">

			<group v-for="item in pageList" :key="item.id" >
				<div class="newsDetail" v-on:click="go('ZymlListDetail',{id:item.id})" >
							<div v-show="item.showImg" class="newsDetailLeft">
								<img v-bind:src="item.imgUrl">
							</div>
							<div class="newsDetailRight">
								<div class="newsDetailRight_top">
									<h5>{{item.title}}</h5>
								</div>
								<div class="newsDetailRight_bottom">
									<div class="spanResourse">来源：<span >{{item.resourse}}</span></div>
									<div class="spanTime">发布时间：<span >{{item.createTime}}</span></div>
								</div>

							</div>

						</div>
			</group>
		</div>

	</view-box>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper';
	import 'swiper/dist/css/swiper.css';
	import {
		ViewBox,
		XHeader,
		Grid,
		GridItem,
		GroupTitle,
		Group,
		Confirm,
		TransferDom,
		Actionsheet,
		InlineXNumber,
		Tabbar,
		TabbarItem
	} from 'vux';
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from "vuex";

	export default {
		name: 'NewListPage',
		data() {
			return {
				swiperOption: {
					autoplay: {
						delay: 1000,
						stopOnLastSlide: true,
					},
					pagination: {
						el: '.swiper-pagination',
						clickable: 　true
					},

					loop: true,
					grabCursor: true,
					setWrapperSize: true,
					autoHeight: true,

					prevButton: '.swiper-button-prev', //上一张
					nextButton: '.swiper-button-next', //下一张
					scrollbar: '.swiper-scrollbar', //滚动条
					mousewheelControl: true,
					observeParents: true,
				},
				swiperList : [
					{
						id: "1",
						imageUrl: "url(" + require('../assets/news/001.jpg') + ")",
						title: "今日热点01"
					},
					{
						id: "2",
						imageUrl: "url(" + require('../assets/news/002.jpg') + ")",
						title: "今日热点02"
					},
					{
						id: "3",
						imageUrl: "url(" + require('../assets/news/006.jpg') + ")",
						title: "今日热点03"
					},
					{
						id: "4",
						imageUrl: "url(" + require('../assets/news/004.jpg') + ")",
						title: "今日热点04"
					},
					{
						id: "5",
						imageUrl: "url(" + require('../assets/news/005.jpg') + ")",
						title: "今日热点05"
					}
				],
				pageList: [{
						id: "1",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "2",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "3",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "4",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "5",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "6",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "7",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "8",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
					{
						id: "9",
						showImg: true,
						imgUrl: require('../assets/news/003.jpg'),
						title: "患病女教师站着上课十年",
						resourse: "发改委",
						createTime: "2017-12-30"
					},
				]
			}
		},
		components: {
			ViewBox,
			XHeader,
			Grid,
			GridItem,
			GroupTitle,
			Group,
			Confirm,
			TransferDom,
			Actionsheet,
			InlineXNumber,
			Tabbar,
			TabbarItem,
			swiper,
			swiperSlide
		},
		methods: {
			imageJump01() {
				window.document.href = this.imageHref01
			},
			imageJump02() {
				window.document.href = this.imageHref02
			},
			imageJump03() {
				window.document.href = this.imageHref03
			},
			imageJump04() {
				window.document.href = this.imageHref04
			},
			imageJump05() {
				window.document.href = this.imageHref05
			},
		},

		mounted() {

		}
	}
</script>

<style scoped>
	#swiper_show {
		height: 200px;
		width: 100%;
		float: left;
	}
	
	.newsList {
		width: 100%;
		float: left;
	}
	
	.imgDiv {
		height: 200px;
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100% !important;
	}
	
	.reSwiper {
		width: 100%;
		height: 100%;
	}
	
	.reSwiperSlide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.swiper-wrapper {
		height: 100% !important;
	}
	
	.imageTitle {
		height: 13%;
		padding-top: 2px;
		width: 100%;
		text-align: left;
		font-size: 10px;
		background-color: rgba(199, 237, 204, 0.5);
		position: absolute;
		bottom: 0;
	}
	
	.newsDetail {
		height: 70px;
		width: 100%;
		float: left;
	}
	
	.newsDetailLeft {
		height: 100%;
		width: 25%;
		padding: 4px;
		float: left;
	}
	
	.newsDetailLeft img {
		height: 100%;
		width: 100%;
	}
	
	.newsDetailRight {
		height: 100%;
		width: 68%;
		padding: 4px;
		float: left;
	}
	
	.newsDetailRight_top {
		height: 60%;
		width: 100%;
		float: left;
	}
	
	.newsDetailRight_bottom {
		height: 40%;
		width: 100%;
		float: left;
		font-size: 8px;
	}
	
	.spanResourse{
		float: left;
		width: 50%;
		text-align: left;
	}
	.spanTime{
		float: left;
		width: 50%;
		text-align: right;
	}
</style>